<template>
	<view class="page">

		<!-- 	<view class="padding flex flex-wrap justify-between align-center ">
					<input class="search-text" type="text" v-model="keyword" placeholder="输入品牌,型号" />
			 <button class="cu-btn round bg-olive" @click="search">搜索</button> 
					 
		</view> -->
		<view class="cu-form-group margin-top">
			<view class="title"> <text class="icos search-ico-wapper">&#xe63c;</text> </view>
			<input class="search-text" type="text" v-model="keyword" placeholder="输入标题或币名" />
			<button class="cu-btn round bg-olive" @click="search">搜索</button>
			<button class="cu-btn round bg-blue" @tap="addCar" data-target="DrawerModalL">添加</button>
		</view>

		<view class="content">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in cars" :key="index"
					@tap="openinfo" :data-carid="item.id">
					<view class="uni-media-list">
						<image class="listimg" :src="item.firstImg"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{item.coinName}}
								{{item.titleName}}
							</view>

							<view class="uni-media-list-text-bottom uni-ellipsis">
								购买日期：{{ item.createtime.substring(0,10) }}
							</view>

							<view class="uni-media-list-text-bottom  ">
							   数量 {{item.buyNum}}  盈亏比: <span style="color: greenyellow;">{{item.ykb}}</span>
								<view>买价 {{item.buyPrice}},  目标 <span style="color: blue;">{{item.destPrice }}</span>, 止损  <span style="color: red;">{{item.stopLossPrice }} </span>  </view>
						<view>	最终盈亏 <span   :class="getClassForMyVariable(item.profit)"> {{item.profit}}</span> </view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 模态搜索信息 -->
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop=""
				:style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				<view class="cu-form-group">
					<view class="title">价格区间</view>
				</view>
				<view class="cu-form-group">
					<input type="number" name="input" placeholder="最低价" v-model="minPrice"></input>一
					<input type="number" name="input" placeholder="最高价" v-model="maxPrice"></input>
				</view>
				<!-- <view class="cu-form-group">
				 	<view class="title" >变速箱:</view>
					   	<view class='cu-tag' :class="clsAT" @tap="ckat">自动</view>
					   	<view class='cu-tag' :class="clsMT" @tap="ckmt">手动</view>
				  </view> -->
				<view class="cu-form-group">
					<view class="title">店名:</view>
					<input name="input" v-model="ShopName"></input>
				</view>
				<view class="cu-form-group">
					<button class="cu-btn round bg-olive" @click="search">搜索</button>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import service from '../../service.js';
	var _self;
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				refreshing: false,
				title: 'Hello',
				cars: [],
				fetchPageNum: 1,
				keyword: '',
				modalName: null,
				minPrice: '',
				maxPrice: '',
				speedAssembly: '',
				clsAT: 'line-green',
				clsMT: 'line-green',
				ShopName: '',

			}
		},
		onLoad(e) {
			_self = this;
			setTimeout(() => {
				this.getData();
			}, 300);

		},
		onPullDownRefresh() {
			console.log('顶部下拉刷新整个页面');
			this.refreshing = true;
			this.getData();
		},
		onReachBottom() {
			console.log('底部上拉加载分页');
			if (this.fetchPageNum > 100) {
				this.loadMoreText = '不再加载更多了'
				return;
			}
			this.getData();
		},
		methods: {
			getData(e) {
				console.log("请求查询" + _self.fetchPageNum);
				uni.request({
					url: service.BaseUrl + 'api/ApiTrader/QueryCarList',
					data: {
						PageIndex: _self.fetchPageNum,
						PageSize: 8,
						titleName: _self.titleName,
						coinName: _self.coinName,
						buyPrice: _self.buyPrice,
						stopLossPrice: _self.stopLossPrice,
					},
					method: 'POST',
					success: (ret) => {
						if (ret.statusCode !== 200 && ret.data.Code != 1) {
							console.log('请求失败', ret)
							return;
						}
						const data = ret.data.Data.data;
						// if (this.refreshing && data[0].id === this.cars[0].id) {
						// 	uni.showToast({
						// 		title: '已经最新',
						// 		icon: 'none',
						// 	});
						// 	this.refreshing = false;
						// 	uni.stopPullDownRefresh();
						// 	return;
						// }
						let list = [];
						for (var i = 0; i < data.length; i++) {
							var item = data[i];
							//item.guid = this.newGuid() + item.id
							list.push(item);
						}

						if (this.refreshing) {
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.cars = list;
						} else {
							this.cars = this.cars.concat(list);
						}
						this.fetchPageNum += 1;
					}
				});
			},
			search() {
				this.modalName = null;
				this.refreshing = true;
				this.fetchPageNum = 1;
				this.getData();
			},
			openinfo(e) {
				var carid = e.currentTarget.dataset.carid;
				// uni.showToast({
				// 	title:carid
				// })
				uni.navigateTo({
					url: '../recordbook/editbook?carid=' + carid,
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			
			addCar() {
				uni.navigateTo({
					url: '../recordbook/addbook',
				});
			},
			
			  getClassForMyVariable(profit) { 
				  console.log("最终的")
				  console.log(profit)
      return profit > 0 ? 'bluecolor' : 'redcolor';  
    },  
		}
	}
</script>


<style>
	.uni-media-list-body {
		height: auto;
	}

	.uni-media-list-text-top {
		line-height: 2.6em;
	}

	.uni-media-list-text-bottom {
		font-size: 30upx;
	}


	.searchBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0rpx 20upx 20upx 20upx;
		background-color: #C0C0C0;
		/* 固定搜索栏 */
		/* position: fixed; */

		/* //z-index: 1000; */

	}

	.search-text {
		font-size: 16px;
		width: 400rpx;
		height: 50rpx;
	}

	.search-ico-wapper {

		height: 40rpx;
		width: 40rpx;
		margin-top: 3;
		padding-top: 0px;
	}


	/* 图片和价格 */
	.listimg {
		width: 270upx;
		height: 190upx;
		margin-right: 10upx;
		margin-left: 0upx;
	}

	.sellprice {
		color: #0000FF;
		font-size: 32upx;

	}
	
	 
	 .selgreen {
	 	color: #0f0;
	 	font-size: 32upx;
	 
	 }

	.bluecolor {
		color: #00FF00;
		font-size: 32upx;
	}
	.redcolor {
		color: #ff0000;
		font-size: 32upx;
	}
</style>